<template>
  <div class="container">
    <el-card>
      <!-- 搜索加新增表单 -->
      <div class="articles_header">
        <!-- 输入框 -->
        <el-form :inline="true" :model="articlesKey" class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input v-model="articlesKey.keyword"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="articlesKey.state" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="clearSubmit" size="small">清除</el-button>
            <el-button type="primary" @click="getAricles" size="small"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <div>
          <!-- 新增技巧 -->
          <el-button
            icon="el-icon-edit"
            type="success"
            size="small"
            @click="ArticlesSkillVisible = true"
            >新增技巧</el-button
          >
        </div>
      </div>
      <!-- 提示信息 -->
      <el-alert
        :title="`一共有${total}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <!-- 表格 -->
      <el-table border :data="articlesList">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="文章标题" prop="title">
          <template slot-scope="scope">
            {{ scope.row.title }}
            <i
              style="color:#03bffa;font-size: 18px; cursor: pointer;"
              class="el-icon-video-camera-solid"
              @click="VideoVisible = true"
            ></i>
          </template>
        </el-table-column>
        <el-table-column label="阅读数" prop="visits"></el-table-column>
        <el-table-column label="录入人" prop="username"></el-table-column>
        <el-table-column label="录入时间" prop="createTime">
          <template slot-scope="scope">
            {{ parseTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state">
          <template slot-scope="scope">
            {{ scope.row.state === 0 ? "已禁用" : "已启用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-col class="operation">
                <el-link
                  :underline="false"
                  type="primary"
                  @click="previewArticles(scope.row)"
                >
                  预览
                </el-link>
                <el-link
                  :underline="false"
                  type="primary"
                  @click="stateChange(scope.row)"
                >
                  {{ scope.row.state === 0 ? "启用" : "禁用" }}
                </el-link>
                <el-link
                  :underline="false"
                  @click="EditarticlesSkillShow(scope.row)"
                  :type="scope.row.state === 0 ? 'primary' : 'info'"
                  :disabled="scope.row.state === 0 ? false : true"
                >
                  修改
                </el-link>
                <el-link
                  :underline="false"
                  @click="removeArticlesSkill(scope.row)"
                  :type="scope.row.state === 0 ? 'primary' : 'info'"
                  :disabled="scope.row.state === 0 ? false : true"
                >
                  删除
                </el-link>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="articlesKey.page"
        layout="prev,pager, next, sizes, jumper"
        :page-sizes="[5, 10, 30, 50]"
        :page-size="articlesKey.pagesize"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 新增面试技巧 -->
    <el-dialog
      title="新增文章"
      :visible.sync="ArticlesSkillVisible"
      :before-close="addArticlesSkillClose"
      width="50%"
    >
      <span>
        <!-- 新增面试技巧的表单 -->
        <el-form
          :model="addSkillForm"
          :rules="addSkillrules"
          ref="addSkillRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="文章标题" prop="title">
            <el-input
              placeholder="请输入文章标签"
              v-model="addSkillForm.title"
            ></el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="articleBody">
            <quill-editor
              v-model="addSkillForm.articleBody"
              :options="editorOption"
              style="height:250px;width:100%;padding-bottom: 55px;"
            >
            </quill-editor>
          </el-form-item>
          <!-- 视频地址 -->
          <el-form-item label="视频地址" prop="videoURL">
            <el-input
              placeholder="请输入视频地址"
              v-model="addSkillForm.videoURL"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addArticlesSkillClose">取 消</el-button>
        <el-button type="primary" @click="addArticlesSkill">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改面试技巧 -->
    <el-dialog
      title="修改文章"
      :visible.sync="EditarticlesSkillVisible"
      :before-close="EditarticlesSkillClose"
      width="50%"
    >
      <span>
        <!-- 新增面试技巧的表单 -->
        <el-form
          :model="editSkillForm"
          :rules="editSkillrules"
          ref="editSkillRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="文章标题" prop="title">
            <el-input
              placeholder="请输入文章标签"
              v-model="editSkillForm.title"
            ></el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="articleBody">
            <quill-editor
              v-model="editSkillForm.articleBody"
              :options="editorOption"
              style="height:250px;width:100%;pediting-bottom: 55px;"
            >
            </quill-editor>
          </el-form-item>
          <el-form-item label="视频地址" prop="videoURL">
            <el-input
              placeholder="请输入视频地址"
              v-model="editSkillForm.videoURL"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="EditarticlesSkillClose">取 消</el-button>
        <el-button type="primary" @click="editArticlesSkill">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 预览 -->
    <el-dialog
      title="预览文章"
      :visible.sync="previewVisible"
      width="50%"
      :before-close="previewClose"
      class="previewArticle"
    >
      <span>
        <!-- 文章标题 -->
        <h1 class="articleTitle">{{ previewList.title }}</h1>
        <!-- 文章时间 -->
        <div class="articleTime">
          <span>{{ parseTime(previewList.createTime) }}</span>
          <span>{{ username }}</span>
          <span>{{ previewList.visits }}</span>
        </div>
        <!-- 文章内容 -->
        <div v-html="previewList.articleBody" class="previewArticleBody"></div>
      </span>
    </el-dialog>

    <!-- 播放视频 -->
    <!-- <el-dialog class="video-preview" show-close='false'
    :visible="VideoVisible" width="50%">
        <div class="video_close" @click="VideoClose">
          <i class="el-icon-close"></i>
        </div>
        <div class="video_box">
          <video :src="addSkillForm.videoURL"></video>
        </div>
    </el-dialog> -->
    <el-dialog
      class="video-preview"
      title="视频播放"
      :visible.sync="VideoVisible"
      width="50%"
      center
    >
      <video
        src="../../assets/big_buck_bunny.mp4"
        autoplay
        muted
        style="width: 715px;"
      ></video>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  changeState,
  add,
  remove,
  detail,
  update
} from "@/api/hmmm/articles";
import { parseTime } from "@/utils/index";
import { quillEditor } from "vue-quill-editor";
import "../../../node_modules/quill/dist/quill.core.css";
import "../../../node_modules/quill/dist/quill.snow.css";
import "../../../node_modules/quill/dist/quill.bubble.css";

export default {
  data() {
    return {
      // 请求参数
      articlesKey: {
        keyword: "",
        state: null,
        // 当前页数
        page: 1,
        // 页尺寸
        pagesize: 10
      },
      total: 0,
      // 文章列表的内容
      articlesList: [],
      // 新增面试技巧
      ArticlesSkillVisible: false,
      addSkillForm: {
        title: "",
        articleBody: "",
        videoURL: ""
      },
      addSkillrules: {
        title: [{ required: true, message: "请输入文章标题", trigger: "blur" }],
        articleBody: [{ required: true, trigger: "blur" }]
      },
      // 富文本的参数
      editorOption: {
        placeholder: "请在这里文章内容",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], //引用，代码块
            ["image", "video"] //上传图片、上传视频
          ]
        }
      },
      // 修改面试技巧
      // 修改的弹出框
      EditarticlesSkillVisible: false,
      editSkillForm: {
        title: "",
        articleBody: "",
        videoURL: ""
      },
      editSkillrules: {
        title: [{ required: true, message: "请输入文章标题", trigger: "blur" }],
        articleBody: [{ required: true, trigger: "blur" }]
      },
      // 预览
      previewVisible: false,
      previewList: {},
      username: "",

      // 视频播放
      VideoVisible: false
    };
  },
  created() {
    this.getAricles();
  },
  components: {
    quillEditor
  },
  methods: {
    // 清空
    clearSubmit() {
      this.articlesKey.keyword = "";
      this.articlesKey.state = null;
      this.getAricles();
    },
    // 获取文章列表的基本信息
    async getAricles() {
      const { data } = await list(this.articlesKey);
      console.log(data);
      this.articlesList = data.items;
      this.total = data.counts;
      this.username = data.items.username;
    },
    // 分页
    handleSizeChange(newSize) {
      this.articlesKey.pagesize = newSize;
      this.getAricles();
    },
    handleCurrentChange(newPage) {
      this.articlesKey.page = newPage;
      this.getAricles();
    },
    // 修改时间格式
    parseTime,
    // 新增面试技巧
    addArticlesSkill() {
      this.$message({
        message: "😄新增技巧成功！",
        type: "success"
      });
      this.$refs.addSkillRef.validate(async valid => {
        if (!valid) return;
        await add(this.addSkillForm);
        this.getAricles();
        console.log("ok");
        this.ArticlesSkillVisible = false;
        this.addSkillForm.title = "";
        this.addSkillForm.articleBody = "";
        this.addSkillForm.videoURL = "";
      });
    },
    // 取消新增面试技巧
    addArticlesSkillClose() {
      this.$refs.addSkillRef.resetFields();
      this.ArticlesSkillVisible = false;
    },
    // 删除面试技巧
    async removeArticlesSkill(scope) {
      this.$message({
        message: "删除成功",
        type: "success"
      });
      const data = {
        id: scope.id,
        state: scope.state
      };
      await remove(data);
      this.getAricles();
    },
    // 改变启用禁用的状态
    async stateChange(scope) {
      const data = {
        id: scope.id,
        state: scope.state
      };
      if (scope.state === 0) {
        data.state = 1;
      } else {
        data.state = 0;
      }
      await changeState(data);
      this.getAricles();
    },
    // 文章修改模块
    EditarticlesSkillClose() {
      this.$refs.editSkillRef.resetFields();
      this.EditarticlesSkillVisible = false;
    },
    async EditarticlesSkillShow(scope) {
      this.EditarticlesSkillVisible = true;
      const data = {
        id: scope.id
      };
      const res = await detail(data);
      // console.log(res);
      this.editSkillForm = res.data;
    },
    // 提交修改
    async editArticlesSkill() {
      this.$message({
        message: "修改成功",
        type: "success"
      });
      await update(this.editSkillForm);
      this.EditarticlesSkillVisible = false;
      this.getAricles();
    },
    // 预览
    previewClose() {
      this.previewVisible = false;
    },
    async previewArticles(scope) {
      this.previewVisible = true;
      const data = {
        id: scope.id
      };
      const res = await detail(data);
      // console.log(res.data);
      this.previewList = res.data;
      this.username = scope.username;
    }
    // 播放视频
  }
};
</script>

<style scoped lang="less">
.container {
  .articles_header {
    display: flex;
    justify-content: space-between;
    .el-form-item {
      margin-right: 10px;
    }
    .el-table {
      margin-top: 15px;
      font-size: 12px;
    }
  }
  .el-card {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  }
  .el-table {
    margin-top: 15px;
    font-size: 12px;
  }
  .operation {
    display: flex;
    justify-content: space-around;
  }
  .el-pagination {
    text-align: right;
  }
  .previewArticle {
    color: #606266;
    padding: 10px;
    .articleTitle {
      padding-bottom: 10px;
    }
    .articleTime {
      span {
        margin-left: 10px;
        margin-top: 10px;
      }
    }
    /deep/.previewArticleBody {
      background-color: #f5f5f5;
      border-top: 1px dashed #ccc;
      padding: 10px;
      img {
        border-style: none;
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
  /deep/.video-preview {
  }
}
</style>
